<template>
	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="page-container">
    <view class="cell-view">
      <view class="img-view">
        <view class="img-icon">
          <text class="iconfont icon-shenghuofuwu top_icon1"></text>
        </view>
      </view>
      <view class="title">
        <text class="text12">企业</text>
      </view>
      <view class="desc">
        <text class="text11">提供企业信息管理、员工服务及社区互动功能，助力企业高效运营与内部协作，提升组织管理效率。</text>
      </view>
      <view class="cell-items">
        <!-- 使用v-for渲染列表项 -->
        <view class="cell-item" v-for="(item, index) in cellList" :key="index" @click="navigationLogin">
          <view class="item-left">
            <view class="item-icon">
              <text class="iconfont icon-shenghuofuwu"></text>
            </view>
          </view>
          <view class="item-middle">
            <text class="text12">{{ item.desc }}</text>
          </view>
          <view class="item-right">
            <wd-icon name="arrow-right" size="20px"></wd-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, nextTick, reactive, onMounted } from 'vue';
import { useRouter } from 'uni-mini-router'
import {
  useFontSizeStore
} from '@/stores/fontSizeStore';
// 引入wd-icon组件（根据实际路径调整）
const fontSizeStore = useFontSizeStore();
// 列表数据（可根据实际需求扩展字段）
const cellList = ref([
  { desc: '社区1' },
  { desc: '社区2' },
   { desc: '社区3' },
    { desc: '社区4' },
]);
const router = useRouter();
const navigationLogin=()=>{
		router.push({ name: 'account_login' })
}
</script>



<style lang="less" scoped>
@import '@/static/styles/mine/index.less';

// 页面基础容器
.page-container {
  min-height: 100vh;
  padding: 30rpx;
  padding-bottom: 160px;
  background-color: #f5f7fa;
  box-sizing: border-box;
}

.cell-view {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  display: flex;
  flex-direction: column;

  .img-view {
    margin-bottom: 24rpx;
    display: flex;
    justify-content: center;

    .img-icon {
      width: 100rpx;
      height: 100rpx;
      background-color: #4caf50;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
    }
  }

  .title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    margin-bottom: 16rpx;
    text-align: center;
  }

  .desc {
    font-size: 24rpx;
    color: #666666;
    text-align: center;
    line-height: 1.5;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  .cell-items {
    display: flex;
    flex-direction: column;

    .cell-item {
      display: flex;
      align-items: center;
      height: 100rpx;
      padding: 0;
      border-bottom: 1rpx solid #eeeeee;
      border-radius: 8rpx;

      // 最后一项移除底部边框
      &:last-child {
        border-bottom: none;
      }

      .item-left {
        flex-shrink: 0;
        width: 50rpx;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .item-icon {
          width: 50rpx;
          height: 50rpx;
          background-color: #4caf50;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          font-size: 24rpx;
        }
      }

      .item-middle {
        flex: 1;
        height: 100%;
        margin-left: 20rpx;
        font-size: 28rpx;
        color: #333333;
        display: flex;
        align-items: center;
      }

      .item-right {
        flex-shrink: 0;
        width: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;
      }
    }
  }
}
.top_icon1{
	font-size: 56rpx!important;
}
</style>